<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>购物车页面</title>

	<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="static/css/cartstyle.css" rel="stylesheet" type="text/css" />
	<link href="static/css/optstyle.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="static/js/jquery.js"></script>

</head>

<body>
<div id="container">
	<!--顶部导航条 -->
	<div class="am-container header">
		<ul class="message-l">
			<div class="topMessage">
				<div class="menu-hd">
					<a href="#" target="_top" class="h">亲，请登录</a>
					<a href="#" target="_top">免费注册</a>
				</div>
			</div>
		</ul>
		<ul class="message-r">
			<div class="topMessage home">
				<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
			</div>
			<div class="topMessage my-shangcheng">
				<div class="menu-hd MyShangcheng">
					<a href="user-center.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
				</div>
			</div>
			<div class="topMessage mini-cart">
				<div class="menu-hd">
					<a id="mc-menu-hd" href="shopcart.html" target="_top">
						<i class="am-icon-shopping-cart  am-icon-fw"></i>
						<span>购物车</span>
						<strong id="J_MiniCartNum" class="h"></strong>
					</a>
				</div>
			</div>
			<div class="topMessage favorite">
				<div class="menu-hd">
					<!--<a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>-->
				</div>
			</div>
		</ul>
	</div>

	<!--悬浮搜索框-->

	<div class="nav white">
		<div class="logo"><img src="static/images/logo.png" /></div>
		<div class="logoBig">
			<li><img src="static/images/logobig.png" /></li>
		</div>

		<div class="search-bar pr">
			<a name="index_none_header_sysc" href="#"></a>
			<form>
				<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
				<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
			</form>
		</div>
	</div>

	<div class="clear"></div>

	<!--购物车 -->
	<div class="concent">
		<div id="cartTable">
			<div class="cart-table-th">
				<div class="wp">
					<div class="th th-chk">
						<div id="J_SelectAll1" class="select-all J_SelectAll">

						</div>
					</div>
					<div class="th th-item">
						<div class="td-inner">商品信息</div>
					</div>
					<div class="th th-price">
						<div class="td-inner">单价</div>
					</div>
					<div class="th th-amount">
						<div class="td-inner">数量</div>
					</div>
					<div class="th th-sum">
						<div class="td-inner">金额</div>
					</div>
					<div class="th th-op">
						<div class="td-inner">操作</div>
					</div>
				</div>
			</div>
			<div class="clear"></div>

			<div class="clear"></div>
			<template v-for="sc,index in shopcarts">
				<tr class="item-list">
					<div class="bundle  bundle-last ">

						<div class="bundle-main">
							<ul class="item-content clearfix">
								<li class="td td-chk">
									<div class="cart-checkbox ">
										<input class="check" id="J_CheckBox_170769542747" v-model="opts" :value="index" type="checkbox">
										<label for="J_CheckBox_170769542747"></label>
									</div>
								</li>
								<li class="td td-item">
									<div class="item-pic">
										<a href="#" target="_blank" :data-title="sc.productName" class="J_MakePoint" data-point="tbcart.8.12">
											<img :src="'static/pimgs/'+sc.productImg" height="70"  class="itempic J_ItemImg"></a>
									</div>
									<div class="item-info">
										<div class="item-basic-info">
											<a :href="'introduction.html?pid='+sc.productId" target="_blank" :title="sc.productName" class="item-title J_MakePoint" data-point="tbcart.8.11">{{sc.productName}} {{sc.skuName}}</a>
										</div>
									</div>
								</li>
								<li class="td td-info">
									<div class="item-props item-props-can">
										<span class="sku-line">{{sc.skuProps}}</span>
										<i class="theme-login am-icon-sort-desc"></i>
									</div>
								</li>
								<li class="td td-price">
									<div class="item-price price-promo-promo">
										<div class="price-content">
											<div class="price-line">
												<em class="price-original">{{sc.originalPrice}}</em>
											</div>
											<div class="price-line">
												<em class="J_Price price-now" tabindex="0">{{sc.sellPrice}}</em>
											</div>
										</div>
									</div>
								</li>
								<li class="td td-amount">
									<div class="amount-wrapper ">
										<div class="item-amount ">
											<div class="sl">
												<input class="min am-btn" name="" type="button" value="-" :data-id="index" @click="changeNum" data-oper="-"/>
												<input class="text_box" name="" type="text" :value="sc.cartNum" style="width:30px;" />
												<input class="add am-btn" name="" type="button" value="+" :data-id="index" @click="changeNum"  data-oper="+" />
											</div>
										</div>
									</div>
								</li>
								<li class="td td-sum">
									<div class="td-inner">
										<em tabindex="0" class="J_ItemSum number">{{sc.sellPrice * sc.cartNum}}</em>
									</div>
								</li>
								<li class="td td-op">
									<div class="td-inner">
										<!--<a title="移入收藏夹" class="btn-fav" href="#"> 移入收藏夹</a>-->
										<a href="javascript:;" data-point-url="#" class="delete">删除</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</tr>
			</template>
		</div>
		<div class="clear"></div>
		<div class="float-bar-wrapper">
			<div id="J_SelectAll2" class="select-all J_SelectAll">
				<div class="cart-checkbox">
					<input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
					<label for="J_SelectAllCbx2"></label>
				</div>
				<span>全选</span>
			</div>
			<div class="operations">
				<a href="#" hidefocus="true" class="deleteAll">删除</a>
				<a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
			</div>
			<div class="float-bar-right">
				<div class="amount-sum">
					<span class="txt">已选商品</span>
					<em id="J_SelectedItemsCount">{{opts.length}}</em><span class="txt">件</span>
					<div class="arrow-box">
						<span class="selected-items-arrow"></span>
						<span class="arrow"></span>
					</div>
				</div>
				<div class="price-sum">
					<span class="txt">合计:</span>
					<strong class="price">¥<em id="J_Total">{{totalPrice}}</em></strong>
				</div>
				<div class="btn-area" @click="gotoOrderAdd">
					<a href="#" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
						<span>结&nbsp;算</span></a>
				</div>
			</div>

		</div>
		<div class="footer">
			<div class="footer-hd">
				<p>
					<a href="#">锋迷商城</a>
					<b>|</b>
					<a href="#">商城首页</a>
					<b>|</b>
					<a href="#">支付宝</a>
					<b>|</b>
					<a href="#">物流</a>
				</p>
			</div>
			<div class="footer-bd">
				<p>
					<a href="#">关于千锋</a>
					<a href="#">合作伙伴</a>
					<a href="#">联系我们</a>
					<a href="#">网站地图</a>
					<em>©qfedu.com 版权所有</em>
				</p>
			</div>
		</div>
	</div>
	<!--操作页面-->
	<div class="theme-popover-mask"></div>
	<div class="theme-popover">
		<div class="theme-span"></div>
		<div class="theme-poptit h-title">
			<a href="javascript:;" title="关闭" class="close">×</a>
		</div>
		<div class="theme-popbod dform">
			<form class="theme-signin" name="loginform" action="" method="post">

				<div class="theme-signin-left">

					<li class="theme-options">
						<div class="cart-title">颜色：</div>
						<ul>
							<li class="sku-line selected">12#川南玛瑙<i></i></li>
							<li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
						</ul>
					</li>
					<li class="theme-options">
						<div class="cart-title">包装：</div>
						<ul>
							<li class="sku-line selected">包装：裸装<i></i></li>
							<li class="sku-line">两支手袋装（送彩带）<i></i></li>
						</ul>
					</li>
					<div class="theme-options">
						<div class="cart-title number">数量</div>
						<dd>
							<input class="min am-btn am-btn-default" name="" type="button" value="-" />
							<input class="text_box" name="" type="text" value="1" style="width:30px;" />
							<input class="add am-btn am-btn-default" name="" type="button" value="+" />
							<span  class="tb-hidden">库存<span class="stock">1000</span>件</span>
						</dd>

					</div>
					<div class="clear"></div>
					<div class="btn-op">
						<div class="btn am-btn am-btn-warning">确认</div>
						<div class="btn close am-btn am-btn-warning">取消</div>
					</div>

				</div>
				<div class="theme-signin-right">
					<div class="img-info">
						<img src="static/images/kouhong.jpg_80x80.jpg" />
					</div>
					<div class="text-info">
						<span class="J_Price price-now">¥39.00</span>
						<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
					</div>
				</div>

			</form>
		</div>
	</div>
	<!--引导 -->
	<div class="navCir">
		<li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
		<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
		<li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
		<li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>
	</div>
</div>
<script type="text/javascript" src="static/js/cookie_utils.js" ></script>
<script type="text/javascript" src="static/js/vue.js" ></script>
<script type="text/javascript" src="static/js/axios.min.js" ></script>
<script type="text/javascript" src="static/js/base.js" ></script>
<script type="text/javascript">
	var vm = new Vue({
		el:"#container",
		data:{
			shopcarts:[],
			token:null,
			opts:[],
			totalPrice:0.00
		},
		watch:{
			opts:function(){
				this.totalPrice = 0;
				for(var i=0; i<this.opts.length; i++){
					var index = this.opts[i]; //index就是选择的购物车记录的索引
					this.totalPrice = this.totalPrice + this.shopcarts[index].cartNum * this.shopcarts[index].sellPrice;
				}
			}
		},
		created:function(){
			var token = getCookieValue("token");
			if(token == null){
				var loginUrl = "login.html?tips=请先登录！&returnUrl=shopcart.html";
				window.location.href = encodeURI(loginUrl);
			}else{
				//请求当前用户的购物车记录
				this.token = token;
				var userId = getCookieValue("userId");
				var url = baseUrl+"shopcart/list";
				axios({
					url:url,
					method:"get",
					headers:{
						token:token
					},
					params:{
						userId:userId
					}
				}).then((res)=>{
					console.log(res.data);
					if(res.data.code==20002 || res.data.code==20001){
						//token过期
						var loginUrl = "login.html?tips=请先登录！&returnUrl=shopcart.html";
						window.location.href = encodeURI(loginUrl);
					}else if(res.data.code==10000){
						//请求成功
						this.shopcarts = res.data.data;
					}else if(res.data.code==10001){
						//请求失败

					}
				});
			}
		},

		methods:{
			changeNum:function(event){
				var oper = event.srcElement.dataset.oper;
				var index = event.srcElement.dataset.id;
				if(oper =="+"){
					this.shopcarts[index].cartNum = parseInt( this.shopcarts[index].cartNum )+1;
				}else if(oper =="-" && this.shopcarts[index].cartNum>1){
					this.shopcarts[index].cartNum = parseInt( this.shopcarts[index].cartNum )-1;
				}
				//请求购物车修改接口： cartId  num
				var cid = this.shopcarts[index].cartId;
				var cnum = this.shopcarts[index].cartNum;
				var url = baseUrl+"shopcart/update/"+cid+"/"+cnum;
				axios({
					url:url,
					method:"put",
					headers:{
						token:this.token
					}
				}).then((res)=>{
					console.log(res);
					if(res.data.code=10000){
						this.totalPrice = 0;
						for(var i=0; i<this.opts.length; i++){
							var index = this.opts[i]; //index就是选择的购物车记录的索引
							this.totalPrice = this.totalPrice + this.shopcarts[index].cartNum * this.shopcarts[index].sellPrice;
						}
					}
				});
			},
			gotoOrderAdd:function(){
				if(this.opts.length ==0){
					alert("请选择要购买的商品！")
				}else{
					//1.获取选择购物车记录的id [0,2]  --->  cartId 8   cartId 10 --- 8,10,
					var cids="";
					for(var i=0;i<this.opts.length; i++){
						var index = this.opts[i];
						var cartId = this.shopcarts[index].cartId;
						if(i < this.opts.length-1){
							cids = cids + cartId + ",";
						}else{
							cids = cids + cartId;
						}
					}
					//2.跳转到order-add.html，并cids传递过去
					window.location.href="order-add.html?cids="+cids;
				}
			}
		}
	});
</script>


</body>

</html>